<template>
	<view class="add-Info-details">
		<view class="cu-form-group">
			<view class="title" v-if="phoneTrue">已绑定手机号</view>
			<view class="title" v-else>手机号</view>
			<input placeholder="请填写" name="input" v-model="phone" :disabled="phoneTrue"></input>
		</view>
		<view class="but">
			<view class="span" v-if="phoneTrue == false">
				<radio class='ztBG margin-left-sm' style="margin-right: 5px;" @click="clickRadio" :checked="radio"></radio>
				<view class="span">
					阅读并同意使用<view class="text-ref" @click="clickFuwu">《服务协议》</view> 和 <view class="text-ref" @click="clickYinsi">《隐私权政策》</view>
				</view>
			</view>
			<view class="sendbut-box">
				<button class="round sendbut" @click="clickAddInfo(phoneTrue?'1':'2')">{{phoneTrue?'去换绑':'保存'}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import homeApi from '@/config/api/home.js'
	import {
		mapMutations
	} from 'vuex';

	export default {
		components: {
			DateTimePicker
		},
		data() {
			return {
				phone: uni.getStorageSync('userInfo').phone || '',
				phoneTrue: uni.getStorageSync('userInfo').phone ? true : false,
				radio: true,
				clickStatus: false
			};
		},
		onLoad(options) {},
		// 监听导航按钮(如果是左边就返回上一页)
		onNavigationBarButtonTap(e) {
			if (e.float == "left") {
				window.history.back(-1);
			}
		},
		methods: {
			...mapMutations(['login']),
			// 点击隐私服务勾选
			clickRadio() {
				this.radio = !this.radio
			},
			// 保存
			clickAddInfo(v) {
				let that = this
				if (that.phoneTrue) {
					that.phoneTrue = false
				}
				if (v == 2) {
					let phoneReg = /(^1[3456789]\d{9}$)/
					if (this.radio == false) {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请勾选隐私条款'
						})
						return
					} else if (this.phone == '') {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写手机号码'
						})
						return
					} else if (phoneReg.test(this.phone) == false) {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请填写正确的手机号码'
						})
						return
					}
					if (that.clickStatus == false) {
						that.clickStatus = true
						let data = {
							'id': uni.getStorageSync('userInfo').id,
							"phone": that.phone,
						}
						homeApi.updPhone(data).then(res => {
							uni.login({
								success: function(loginRes) {
									if (loginRes) {
										//获取用户信息
										uni.getUserInfo({
											success: function(infoRes) {
												homeApi.login({
													code: loginRes.code, //临时登录凭证
													rawData: infoRes.rawData, //用户非敏感信息
													signature: infoRes.signature, //签名
													encryptedData: infoRes.encryptedData, //用户敏感信息
													iv: infoRes.iv //解密算法的向量
												}).then(lres => {
													// 设置登陆状态
													that.login(lres)
													uni.navigateBack({
														delta:1
													})
												})
											}
										});
									}
								}
							});

						})
					} else {
						uni.showToast({
							icon: 'none',
							type: 'error',
							title: '请不要重复点击'
						})
						return
					}
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-Info-details {
		input {
			text-align: right;
		}

		.but {
			margin-top: 8vh;
			width: 100vw;
			display: flex;
			align-items: center;
			flex-direction: column;

			.span {
				display: flex;
				align-items: center;

				radio {
					transform: scale(0.7);
				}

				.text-ref {
					color: #0081FF;
					border-bottom: 1px solid #276af3;
				}
			}

			.sendbut-box {
				padding: 4vh 10vw;
				width: 100vw;

				.sendbut {
					background: #276af3;
					color: #fff;
				}
			}


		}
	}
</style>
